<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script>
// 引入相关的依赖
import BpmnView from 'bpmn-js/lib/Viewer'
import ModelingModule from 'bpmn-js/lib/features/modeling'
import { getDefinitionsByInstanceId, getDefinitionXML, gethighLine } from '@/api/activiti/definition'
import tools from '../../../../ruoyi-bpmnjs/resources/tools'
export default {
  props: {
    instanceId: {
      type: String
    }
  },
  name: '',
  components: {},
// 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
// 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.init()
  },
  data() {
    return {
      // bpmn建模器
      bpmnModeler: null,
      container: null,
      canvas: null
    }
  },
// 方法集合
  methods: {
    init () {
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      // 建模
      this.bpmnModeler = new BpmnView({
        container: canvas,
        additionalModules: [
          ModelingModule, // 基础工具 MoveModule、SetColor 等依赖于此
        ]
      })
      this.createNewDiagram()
		},
		createNewDiagram () {
      getDefinitionsByInstanceId(this.instanceId).then(response => {
        let data = response.data
        gethighLine(this.instanceId).then(response => {
          const ColorJson=tools.getByColor(response.data);
          const param={
            "deploymentId":data.deploymentID || '6d4af2dc-bab0-11ea-b584-3cf011eaafca',
            "resourceName":decodeURI(data.resourceName || 'String.bpmn')
          }
          getDefinitionXML(param).then(response => {
            //将字符串转换成图显示出来
            this.bpmnModeler.importXML(response, (err) => {
            	if (err) {
            		// console.error(err)
            	}else {
                setTimeout(() =>{
                  for (let i in ColorJson) {
                    tools.setColor(ColorJson[i],this.bpmnModeler)
                  }
                }, 200)
            		// 这里是成功之后的回调, 可以在这里做一系列事情
                this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto');//图形放置容器中间
            		this.success()
            	}
            })
          })
        })
      })

		},
		success () {
			// console.log('创建成功!')
		}
  },
// 计算属性
  computed: {}
}
</script>

<style scoped>
.containers{
	background-color: #FEC171;
	width: 100%;
	height: calc(100vh - 300px);
}
.canvas{
	width: 100%;
	height: 100%;
}
</style>
